<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-col :span="13">
            <el-card class="bgc1">
              <el-row class="usertask-state">工单统计</el-row>
            </el-card>
          </el-col>
          <el-col :span="11">
            <el-card>
              <div class="sale-state">销售统计</div>
            </el-card>
          </el-col>
        </el-row>
        <el-card>
          <div class="sale-data">
            <el-row class="header" flex justify="center">
              <el-col :span="20" class="title">
                <span style="font-weight:bolder;margin-right: 10px;">销售数据</span>
                <span style="color:#b2b2b2;font-size:small;">{{ start }} ~ {{ end }}</span>
              </el-col>
              <el-col :span="4">
                <el-row class="select-date" type="flex" justify="center" align="middle">
                  <div :class="['item', dateIschecked === 1 ? 'isChecked' : '']" @click="dateIschecked = 1">周</div>
                  <div :class="['item', dateIschecked === 2 ? 'isChecked' : '']" @click="dateIschecked = 2">月</div>
                  <div :class="['item', dateIschecked === 3 ? 'isChecked' : '']" @click="dateIschecked = 3">年</div>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div id="trend-sales" class="trend-sales chart-size">销售额趋势图</div>
              </el-col>
              <el-col :span="12">
                <div id="distribute-sales" class="distribute-sales chart-size">销售额分布</div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-card>
        <el-col :span="6">商品热榜</el-col>
      </el-card>
    </el-row>
    <el-row>
      <el-col>
        <el-card>
          合作商点位数
        </el-card>
      </el-col>
      <el-col>
        <el-card>
          异常设备监控
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { salesInfoAPI, salesdistributionAPI } from '@/api'
export default {
  name: 'Dashboard',
  data() {
    return {
      startDate: dayjs().add(-1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD'),
      endDate: dayjs(new Date()).format('YYYY-MM-DD'),
      collectType: 1,
      TrendSalesChartxAxis: [],
      TrendSalesChart: null,
      DistributeSalesChart: null,
      dateIschecked: 1
    }
  },
  computed: {
    start() {
      return dayjs(this.startDate).format('YYYY.MM.DD')
    },
    end() {
      return dayjs(this.endDate).format('YYYY.MM.DD')
    }
  },
  watch: {
    dateIschecked(val) {
      if (val === 1) {
        this.collectType = 1
        this.startDate = dayjs().add(-1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD')
        this.endDate = dayjs(new Date()).format('YYYY-MM-DD')
        this.getTrendSalesChart()
        this.getDistributeSalesChart()
      } else if (val === 2) {
        this.collectType = 1
        this.startDate = dayjs().startOf('month').format('YYYY-MM-DD')
        this.endDate = dayjs(new Date()).format('YYYY-MM-DD')
        this.getTrendSalesChart()
        this.getDistributeSalesChart()
      } else {
        this.collectType = 2
        this.startDate = new Date().getFullYear() + '-01' + '-01'
        this.endDate = dayjs(new Date()).format('YYYY-MM-DD')
        this.getTrendSalesChart()
        this.getDistributeSalesChart()
      }
    }
  },
  created() {
    this.getTrendSalesChart()
    this.getDistributeSalesChart()
  },
  methods: {
    async getTrendSalesChart() {
      const { data } = await salesInfoAPI(this.collectType, this.startDate, this.endDate)
      // 解决There is a chart instance already initialized on the dom.的警告
      // 为当前图表声明了一个全局变量，它要是不为空，使用dispose方法销毁后再次初始化echarts
      if (this.TrendSalesChart !== null && this.TrendSalesChart !== '' && this.TrendSalesChart !== undefined) {
        this.TrendSalesChart.dispose()
      }
      this.TrendSalesChart = echarts.init(document.getElementById('trend-sales'))
      // 判断如果是周，x轴渲染成星期
      if (data.xAxis.length === 7) {
        this.TrendSalesChartxAxis = data.xAxis.map(item => {
          const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
          return weekday[new Date(item).getDay()]
        })
      } else {
        // 如果是年或者月，x轴直接使用请求到的日期
        this.TrendSalesChartxAxis = data.xAxis
      }
      const option = {
        title: [
          {
            show: true,
            text: '销售额趋势图',
            x: 'center',
            textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            // fontFamily: 'Arial, Verdana, sans...',
              fontSize: 14,
              color: '#000',
              fontStyle: 'normal',
              fontWeight: 'bolder'
            }
          },
          {
            subtext: '单位：元',
            x: 'left',
            subtextStyle: { // 副标题文本样式{"color": "#aaa"}
            // fontFamily: 'Arial, Verdana, sans...',
            // fontSize: 10,
              fontStyle: 'normal',
              fontWeight: 'normal'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          formatter: '{a}: \n {c}<br>{b}'
        },
        xAxis: {
          type: 'category',
          data: this.TrendSalesChartxAxis,
          boundaryGap: false // 不留白，从原点开始
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            animationDuration: 500, // 动画时间
            lineStyle: {
              width: 3// 0.1的线条是非常细的了
            },
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: data.series.map(item => item / 100),
            type: 'line',
            smooth: true,
            color: '#ec635e',
            name: '销售额',
            areaStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#ec635e' // 0% 处的颜色
                }, {
                  offset: 0.8,
                  color: 'rgba(249, 224, 224,0)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            }
          }
        ]
      }
      option && this.TrendSalesChart.setOption(option)
    },
    async getDistributeSalesChart() {
      const { data } = await salesdistributionAPI(this.startDate, this.endDate)
      // console.log(data)
      if (this.DistributeSalesChart !== null && this.DistributeSalesChart !== '' && this.DistributeSalesChart !== undefined) {
        this.DistributeSalesChart.dispose()
      }
      this.DistributeSalesChart = echarts.init(document.getElementById('distribute-sales'))
      const option = {
        title: [
          {
            show: true,
            text: '销售额分布图',
            x: 'center',
            textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            // fontFamily: 'Arial, Verdana, sans...',
              fontSize: 14,
              color: '#000',
              fontStyle: 'normal',
              fontWeight: 'bolder'
            }
          },
          {
            subtext: '单位：元',
            x: 'left',
            subtextStyle: { // 副标题文本样式{"color": "#aaa"}
            // fontFamily: 'Arial, Verdana, sans...',
            // fontSize: 10,
              fontStyle: 'normal',
              fontWeight: 'normal'
            }
          }
        ],
        color: '#a6c0fa',
        tooltip: {
          trigger: 'axis',
          formatter: '{a}: \n {c}<br>{b}',
          axisPointer: {
            type: 'none'
          }
        },
        xAxis: {
          type: 'category',
          data: data.xAxis

          // data: ['Mon', 'Tue']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.series.map(item => item / 100),
            name: '销售额',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              borderRadius: [8, 8, 0, 0] // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
            }
          }
        ]
      }
      option && this.DistributeSalesChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    .bgc1{
      background: #e9f3ff;
    // background-image: url(),url(../img/task.66b715b7.png);
    background-repeat: no-repeat,no-repeat;
    background-position: 0 0,calc(100% - 12px) 100%;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.chart-size{
  padding-left: 35px;
  width: 541px;
  height: 278px;
}
.select-date{
  width: 129px;
  height: 34px;
  background: rgba(233,243,255,.37);
  border-radius: 10px;
  .item{
    width: 37px;
    height: 25px;
    font-size: 14px;
    color: #9ca3b4;
    cursor: pointer;
    text-align: center;
    line-height: 25px;
}
.isChecked{
    background: #fff;
    -webkit-box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    border-radius: 7px;
    font-weight: 600;
    color: #333;

  }
}
.el-card{
  border-radius:20px
}
</style>
